<template>
  <section class="live-start">
    <div class="c-p c-pz10 c-flex-row c-justify-sb c-aligni-center c-translucent-balck30 c-pl24 c-pr24 c-hh72">
      <div class="c-flex-row c-aligni-center c-fc-white c-fs20">
        <div>距离开播：</div>
        <div>
          <span class="c-inlineblack c-textAlign-c time-style">{{ liveStartDownCount.dayNum }}</span>
          <span class="c-ph10">天</span>
          <span class="c-inlineblack c-textAlign-c  time-style">{{ liveStartDownCount.hourNum }}</span>
          <span class="c-ph10">时</span>
          <span class="c-inlineblack c-textAlign-c  time-style">{{ liveStartDownCount.minuteNum }}</span>
          <span class="c-ph10">分</span>
          <span class="c-inlineblack c-textAlign-c  time-style">{{ liveStartDownCount.secondsNum }}</span>
          <span class="c-ph10">秒</span>
        </div>
      </div>
      <div v-if="isShowSubBtn && isShowRemind" @click="toggleSubscribeLive" class="c-hh40 c-bg-xblue c-br20 c-flex-row c-aligni-center c-ph12 c-fc-white c-fs20">
        <!-- <i class="iconfont icon-tixing  c-fs18 c-fc-white c-mr10"></i> -->
        <span class="c-fs20 c-fc-white">{{ isSubscribeLive ? (personalSet ? '取消预约' : '取消提醒') : personalSet ? '立即预约' : '开播提醒' }}</span>
      </div>
    </div>
    <!--开播提醒关注 -->
    <subscribe-tip :showModal="showSubTip" :qrCodeUrl="qrCodeUrl" @closedModal="closeSubTip"></subscribe-tip>
  </section>
</template>
<script>
import { utilJs } from '@/utils/common.js';
import subscribeTip from '@/components/templates/common/subscribeTip.vue';

export default {
  components: {
    subscribeTip
  },
  props: {
    isShowRemind: {
      type: [Number, String],
      default: 1
    },
    liveStartDownCount: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    liveStartDownCount: {
      handler() {
        if (this.liveStartDownCount.dayNum * 1 > 0 || this.liveStartDownCount.hourNum * 1 || this.liveStartDownCount.minuteNum * 1 > 4) {
          this.isShowSubBtn = true;
          return;
        }
        this.isShowSubBtn = false;
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      isShowSubBtn: true,
      showSubTip: false,
      isSubscribeLive: false,
      qrCodeUrl: '',
      personalSet: false
    };
  },
  methods: {
    public_init(liveId) {
      // eslint-disable-next-line no-debugger
      this._liveId = liveId;
      this.getLiveRemind();
      let curCompanyId = localStorage.getItem('companyId');
      let setpersonal = ['79jee7', 'lj7l', '8rxm', '5r4y7']; //这三个公司就算有直播视频简介也自动跳直播间
      if (setpersonal.includes(curCompanyId)) {
        //中泰定制
        this.personalSet = true;
      }
    },
    getLiveRemind() {
      utilJs.getMethod(`${global.apiurl}liveFlow/getLiveRemind/${this._liveId}`, res => {
        this.isSubscribeLive = res.isSet;
      });
    },
    closeSubTip() {
      this.showSubTip = false;
      this.getLiveRemind();
    },
    //订阅或取消订阅
    toggleSubscribeLive() {
      let type = this.isSubscribeLive == 1 ? 2 : 1;
      utilJs.postMethod(`${global.apiurl}liveFlow/setLiveRemind/${this._liveId}`, { type: type }, res => {
        if (res.mpQrcode != '') {
          this.qrCodeUrl = res.mpQrcode;
          this.showSubTip = true;
          return;
        }
        if (!res.status) {
          return;
        }
        let tipMsg = type == 1 ? (utilJs.isAndroidApp() || utilJs.isIOSAppALL() ? '预约成功' : '设置成功，直播开始前5分钟进行微信推送提醒哦！') : '已取消提醒';
        this.isSubscribeLive = type == 1 ? 1 : 0;
        this.$emit("getLiveRemind")
        if (type == 1) {
          this.$emit("bookInvition")
          return
        }
        this.$showCjToast({
          text: tipMsg,
          type: 'success',
          time: 3000
        });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.time-style {
  padding: 0 0.1rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
}
.live-start {
  .c-bg-xblue {
    background: var(--live-theme-color);
  }
}
/* .start-bg {
  background: linear-gradient(
    -90deg,
    rgba(245, 108, 108, 1),
    rgba(245, 108, 108, 0.7)
  );
} */
</style>
